import React, { Component } from 'react'
import './index.css'
export default class Footer extends Component {
	state = {
		isChecked: false,
	}
	// 全选checkbox的回调
	handleCheckeAll = (e) => {
		this.props.checkAllToDo(e.target.checked)
  }
  // 清楚所有已完成的回调
	handleClearAllDone =() => {
    this.props.clearAllDone()
  }

	render() {
		const { todos } = this.props
		const todoDones = todos.filter((todo) => {
			return todo.done === true
		})
		const total = todos.length
		return (
			<div className="todo-footer">
				<label>
					<input
						type="checkbox"
						checked={todoDones.length === total && total !== 0 ? true : false}
						onChange={this.handleCheckeAll}
					/>
				</label>
				<span>
					<span>已完成{todoDones.length}</span> / 全部{total}
				</span>
				<button className="btn btn-danger" onClick={this.handleClearAllDone}>
					清除已完成任务
				</button>
			</div>
		)
	}
}
